<template>
	<view class="page-fade-in" :style="{opacity: pageOpc}">
		<template v-if="pageOpc">
			<view class="content">
				<view class="billiards-info-box flexWrapNo">
					<view class="billiards-img">
						<image src="/static/home/tableImg.png"></image>
					</view>
					<view class="info-right">
						<view class="billiards-info">
							<view class="billiards-name">{{tableInfo.equipment_name}}</view>
							<view class="shop-name">{{tableInfo.shop_name}}</view>
							<view class="status" :class="{busy:tableInfo.status==2}">{{tableInfo.status==2?'使用中':'空闲'}}</view>
							<view class="order-time">{{tableInfo.status==2?'可预约：'+tableInfo.yuyue:''}}</view>
						</view>
						<view class="verification-box flexWrapNo">
							
						</view>
					</view>
				</view>
				<view class="padd-box">
					<view class="coupon-box">
						<view class="coupon-cont flexWrap">
							<view class="coupon-left flexWrapNo">
								<image src="../../static/coupon/coupon-icon.png" class="coupon-icon"></image>
								<text class="coupon-name">{{couponName}}</text>
							</view>
							<view class="coupon-right">团购券</view>
						</view>
						<view class="time-tips">系统已默认选择对应时长：{{totalHour}}小时</view>
					</view>
					<view class="meal-box flexWrap">
						<view class="meal-item flexWrapNo" :class="{active:currmentIndex==0}" @tap="changeMeal(0)">
							<image src="../../static/home/immediately-icon.png" class="meal-icon"></image>
							<text>立即开台</text>
						</view>
						<view class="meal-item flexWrapNo" :class="{active:currmentIndex==1}" @tap="changeMeal(1)">
							<image src="../../static/home/appointment-icon.png" class="meal-icon"></image>
							<text>预约开台</text>
						</view>
					</view>
					<block v-if="currmentIndex==0">
						<view class="time-box">
							<view class="flexWrap">
								<view class="meal-info">
									<view class="meal-title">立即开台</view>
									<view class="price-text">价格：{{tableInfo.price}}元/小时</view>
								</view>
							</view>
							<view class="lattice-box flexWrapNo">
								<view class="lattice-item flexWarpCenterColumn" v-for="(item,index) in hoursList" :key='index' v-if="index<=23">
									<view class="lattice" :class="{white:index>pastHour,blue:index>=currentHour&&index<=allHour,red:item.order_type!=0}"></view>
									<text class="lattice-text">{{item.time}}</text>
								</view>
							</view>
							<view class="lattice-box flexWrapNo" v-if="allHour>23">
								<view class="lattice-item flexWarpCenterColumn" v-for="(item,index) in hoursList" :key='index' v-if="index>23">
									<view class="lattice white" :class="{blue:item.time<=allHour-24,red:item.order_type!=0}"></view>
									<text class="lattice-text">{{item.time}}</text>
								</view>
							</view>
							<view class="select-time">已选时间：{{currmentDate}} {{currmentTime}}～<text v-if="allHour>23">次日</text>{{nextTime}}</view>
						</view>
						<view class="explain-box">
							<view class="explain-cont">
								<view v-html="tableInfo.immediately_opening_explain"></view>
							</view>
						</view>
					</block>
					<block v-if="currmentIndex==1">
						<view class="time-box">
							<view class="flexWarpColumn">
								<view class="meal-info">
									<view class="meal-title">预约开台</view>
									<view class="price-text">价格：{{tableInfo.price}}元/小时 <text class="set-time">请设置预约时间：</text> </view>
								</view>
								<view class="date-box flexWrapNo">
									<view class="date-item" :class="{'data-active':dateIndex==index}" v-for="(item,index) in dateList" :key='index' @tap="changeDate(index)">
										{{item.riqis}}
									</view>	
								</view>
								<view class="operation-box flexWrapNo" style="margin-top: 30upx;">
									<view style="margin-right: 28upx;">从</view>
									<picker mode="time" :value="currmentTime" :start="startTime" end="24:00" @change="bindTimeChange">
										<view class="flexWrapNo">
											<view class="reduce-btn">{{currmentTime.split(':')[0]}}</view>
											<view style="margin: 0 10upx;">:</view>
											<view class="reduce-btn">{{currmentTime.split(':')[1]}}</view>
										</view>
									</picker>
									<view style="margin: 0 16upx;">开始</view>
									<view class="operation-num">{{totalHour}}小时</view>
								</view>
							</view>
							<view class="lattice-box flexWrapNo">
								<view class="lattice-item flexWarpCenterColumn" v-for="(item,index) in hoursList" :key='index' v-if="index<=23">
									<view class="lattice" :class="{white:index>pastHour,blue:index>=currentHour&&index<=allHour,red:item.order_type!=0}"></view>
									<text class="lattice-text">{{item.time}}</text>
								</view>
							</view>
							<view class="lattice-box flexWrapNo" v-if="allHour>23">
								<view class="lattice-item flexWarpCenterColumn" v-for="(item,index) in hoursList" :key='index' v-if="index>23">
									<view class="lattice white" :class="{blue:item.time<=allHour-24,red:item.order_type!=0}"></view>
									<text class="lattice-text">{{item.time}}</text>
								</view>
							</view>
							<view class="select-time">已选时间：{{currmentDate}} {{currmentTime}}～<text v-if="allHour>23">次日</text>{{nextTime}}</view>
						</view>
						<view class="explain-box">
							<view class="explain-cont">
								<view v-html="tableInfo.make_opening_explain"></view>
							</view>
						</view>
					</block>
				</view>
				<view class="btn-box">
					<view class="determine-btn" @tap="comfirmPay()">确定开台</view>
				</view>
				<view class="tips-box flexWarpCenterColumn" v-if="tipsFlage">
					<view class="tips-image">
						<image src="/static/public/success-icon.png"></image>
					</view>
					<view class="tips-name">开台成功</view>
					<view class="tips-btn" @tap="closeTips()">知道了</view>
				</view>
				<view class="mask-box" v-if="tipsFlage"></view>
			</view>
		</template>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pageOpc:0,
				currmentIndex:0,
				currmentDate:"",
				currentHour:0,
				startTime:"",
				currmentTime:"",
				nextTime:"",
				totalHour:1,
				pastHour:0,
				dateIndex:0,
				dateList:[],
				status:0,
				meituan_id:"",
				tableInfo:{},
				hoursList:[],
				order_price:"",
				yingfu_price:"",
				reality_price:"",
				couponName:"",
				couponData:{
					available_weekly_data: "monday,tuesday,wednesday,thursday",
					custom_times: "2022-11-01 00:00:00 - 2022-11-30 23:59:59",
					date_limit_data: "custom",
					duration: 1,
					id: 3,
					meituan_id: "943017524",
					original_price: "1.00",
					price: "1.00",
					store_id: 4,
					title: "优惠券",
				},
				order_no:"166711066155520060024225",
				tipsFlage:false,
				weekArr:['sunday','monday','tuesday','wednesday','thursday','friday','saturday'],
				weekstring:"",
				dateLimit:"",
				customTime:"",
				allHour:0,
				order_id:"",
				qr_code:"",
				meituan_coupon_id:""
			}
		},
		onReady(){
			setTimeout(() => {
				this.pageOpc=1
			}, 100)
		},
		onLoad(ops) {
			this.meituan_id=ops.meituan_id
			this.qr_code=ops.qr_code
			this.meituan_coupon_id=ops.id
			console.log(ops)
			this.geCouponDetails();
			this.tableDetails();
			this.getHoursData();
		},
		methods: {
			showTips(){
				this.tipsFlage=true
			},
			closeTips(){
				this.tipsFlage=false
				setTimeout(() => {
					uni.switchTab({
						url:'/pages/order/orderList'
					})
				}, 1000)
			},
			// 选择时间
			bindTimeChange: function(e) {
				if(this.dateIndex!=0){//如果不是今天
					if(Number(e.detail.value.split(':')[0])+Number(this.totalHour)>=24){
						this.$tools.showToast('每日可选时间为24小时')
						return;
					}
				}else{
					if(this.tableInfo.yuyue=='23:59'){
						this.dateIndex+=1
						if(this.currmentIndex>=1){//如果是预约就选择当前日期下的格子
							let key=Object.keys(this.tableInfo.t_date)
							this.hoursList=this.tableInfo.t_date[key[this.dateIndex]]//获取当前天的格子
							this.currmentDate=this.getDate(1,this.dateIndex)
							if(this.dateIndex!=0){//不是今天
								this.startTime="00:00"
								this.currmentTime="00:00"
								this.pastHour=-1
								this.currentHour=0
								this.allHour=Number(this.totalHour)+Number(this.currentHour)
								let currmentDate=this.getDate(0)+' '+this.currmentTime
								this.nextTime=this.getTimeString(currmentDate,this.totalHour)//下一个小时的时间
							}else{
								this.getHoursData();
								this.hoursList=this.tableInfo.t_date[key[0]].concat(this.tableInfo.t_date[key[1]])//如果是今天就获取第二天的格子
							}
						}
					}
					if (this.allHour==47){
						this.$tools.showToast('最多可选次日时间')
						return
					}
				}
				this.currmentTime=e.detail.value
				let currmentDate=this.getDate(0)+' '+this.currmentTime
				this.nextTime=this.getTimeString(currmentDate,this.totalHour)//下一个小时的时间
				this.currentHour=this.currmentTime.split(':')[0]
				this.allHour=Number(this.totalHour)+Number(this.currentHour)
			},
			getTimeData(){
				var time = new Date();
				this.currentHour=time.getHours()//当前小时
				this.allHour=Number(this.totalHour)+Number(this.currentHour)
				this.pastHour=this.currentHour-1//过去了多少个小时
				console.log(this.currentHour)
			},
			isToday(today,date) {
				if(!date) return;
				var d = new Date(date.replace(/-/g,"/"));
				var todaysDate = today?new Date(today.replace(/-/g,"/")):new Date();
				return d.setHours(0,0,0,0) == todaysDate.setHours(0,0,0,0);
			},
			greaterToday(today,date){
				if(!date) return;
				var d = new Date(date.replace(/-/g,"/"));
				var todaysDate = today?new Date(today.replace(/-/g,"/")):new Date();
				return d.setHours(0,0,0,0)>todaysDate.setHours(0,0,0,0);
			},
			// 加分钟
			addMinutes(date,num){
				var time = new Date();
				var time1 =Date.parse(date.replace(/-/g, '/'))
				time.setTime(time1 + 60000*num);
				let hours=time.getHours()<=9?'0'+time.getHours():time.getHours()
				let minutes=time.getMinutes()<=9?'0'+time.getMinutes():time.getMinutes()
				return hours+":"+minutes
			},
			// 获取当前日期
			getDate(type,num){
				num=num||0
				var time = new Date();
				time.setDate(time.getDate() + num);
				let year=time.getFullYear()
				let month=time.getMonth()+1
				let day=time.getDate()
				let fullDate=""
				if(type==0){
					fullDate=year+'-'+month+'-'+day
				}else{
					fullDate=month+'月'+day+'日'
				}
				return fullDate;
			},
			// 获取当前时间
			getTimeString(currmentDate,num){
				num=num||0
				var time = new Date();
				//var time1 =currmentDate?Date.parse(currmentDate):new Date().getTime();//如果传了日期就获取日期，否则获取当前时间
				var time1 =currmentDate?Date.parse(currmentDate.replace(/-/g, '/')):new Date().getTime();//如果传了日期就获取日期，否则获取当前时间
				time.setTime(time1 + 3600000*num);
				let hours=time.getHours()<=9?'0'+time.getHours():time.getHours()
				let minutes=time.getMinutes()<=9?'0'+time.getMinutes():time.getMinutes()
				return hours+":"+minutes
			},
			// 获取各个参数
			getHoursData(){
				var time = new Date();
				this.currentHour=time.getHours()//当前小时
				if(this.tableInfo.yuyue&&this.currmentIndex!=0){//如果有预约时间就从预约时间开始
					let addTime=this.addMinutes(this.getDate(0)+' '+this.tableInfo.yuyue,1)
					let currmentTime=this.getDate(0)+' '+addTime
					this.currmentTime=this.getTimeString(currmentTime)
					this.nextTime=this.getTimeString(currmentTime,this.totalHour)
					this.startTime=this.getTimeString(currmentTime)
					if(this.tableInfo.day_yuyue){//如果有预约
						this.currentHour=this.tableInfo.yuyue.split(':')[0]
						if(this.isToday(this.getDate(0,this.dateIndex),this.tableInfo.day_yuyue)){
							console.log('是同一天111111')
						}else{
							this.dateIndex+=1
							this.nextIndex=this.dateIndex+1
							let key=Object.keys(this.tableInfo.t_date)
							this.hoursList=this.tableInfo.t_date[key[this.dateIndex]]//获取当前天的格子
							console.log('不是同一天111111')
						}
					}
				}else{
					this.currmentTime=this.getTimeString()//获取当前时间
					this.nextTime=this.getTimeString('',this.totalHour)//下一个小时的时间
					this.startTime=this.getTimeString()
				}
				this.allHour=Number(this.totalHour)+Number(this.currentHour)
				this.pastHour=this.currentHour-1//过去了多少个小时
				if(this.currmentIndex==0){
					this.currmentDate=this.getDate(1,this.dateIndex);//获取当前日期
				}else{
					this.currmentDate=this.tableInfo.yuyue!='23:59'?this.getDate(1,this.dateIndex):this.getDate(1,1);//获取当前日期
				}
			},
			changeMeal(index){
				this.currmentIndex=index
				this.dateIndex=0//天数恢复默认
				let key=Object.keys(this.tableInfo.t_date)
				this.hoursList=this.tableInfo.t_date[key[0]].concat(this.tableInfo.t_date[key[1]])
				this.getHoursData();
			},
			// 选择日期
			changeDate(index){
				this.dateIndex=index
				if(this.currmentIndex==0){
					this.currmentDate=this.getDate(1,this.dateIndex);//获取当前日期
				}else{
					this.currmentDate=this.tableInfo.yuyue!='23:59'?this.getDate(1,this.dateIndex):this.getDate(1,1);//获取当前日期
				}
				if(this.currmentIndex==1){//如果是预约就选择当前日期下的格子
					let key=Object.keys(this.tableInfo.t_date)
					this.hoursList=this.tableInfo.t_date[key[this.dateIndex]]//获取当前天的格子
					if(this.dateIndex!=0){
						this.startTime="00:00"
						this.currmentTime="00:00"
						this.pastHour=-1
						this.currentHour=0
						this.allHour=Number(this.totalHour)+Number(this.currentHour)
						let currmentDate=this.getDate(0)+' '+this.currmentTime
						this.nextTime=this.getTimeString(currmentDate,this.totalHour)//下一个小时的时间
					}else{
						this.getHoursData();
						this.hoursList=this.tableInfo.t_date[key[0]].concat(this.tableInfo.t_date[key[1]])//如果是今天就获取第二天的格子
					}
				}
			},
			// 桌球详情
			tableDetails(){
				this.$request.post(this.$api.tableDetails, {
					store_id:uni.getStorageSync('store_id'),
					equipment_id:uni.getStorageSync('equipment_id')
				}, {}).then(res => {
					let {
						data = {}
					} = res;
					if (res.code==1) {
						this.tableInfo=data
						let key=Object.keys(this.tableInfo.t_date)
						this.hoursList=this.tableInfo.t_date[key[0]].concat(this.tableInfo.t_date[key[1]])
						if(data.days_in_advance==1){
							this.dateList=[{riqis:'今天'}]
						}else if(data.days_in_advance==2){
							this.dateList=[{riqis:'今天'},{riqis:'明天'}]
						}else{
							this.dateList=[{riqis:'今天'},{riqis:'明天'},{riqis:'后天'}]
						}
					}
				})
			},
			// 团购券详情
			geCouponDetails(){
				this.$request.post(this.$api.couponDetails, {
					store_id:uni.getStorageSync('store_id'),
					meituan_id:this.meituan_id
				}, {
					token:true
				}).then(res => {
					let {
						data = {}
					} = res;
					if(res.code==1){
						this.order_price=data.original_price
						this.reality_price=data.reality_price
						this.yingfu_price=data.price
						this.couponName=data.title
						this.totalHour=data.duration
						this.dateLimit=data.date_limit_data
						this.weekstring=data.available_weekly_data
						this.customTime=data.custom_times||""
						this.getHoursData();
					}
				})
			},
			isDuringDate(currDate,beginDateStr, endDateStr) {
					let curDate = new Date(currDate);
			        let beginDate = new Date(beginDateStr);
			        let endDate = new Date(endDateStr);
			    if (curDate >= beginDate && curDate <= endDate) {
			        return true;
			    }
			    return false;
			},
			// 确认开台
			comfirmPay(){
				uni.showLoading({
					title:'加载中...',
					mask:true
				})
				let start_time=""
				if(this.currmentIndex!=0){
					start_time=this.currmentTime
				}
				// let week=this.weekArr[new Date().getDay()];
				// if(this.dateLimit=="weekly"&&!this.weekstring.includes(week)){
				// 	this.$tools.hideLoading()
				// 	this.$tools.showToast('当前日期不可用')
				// 	return;
				// }else if(this.dateLimit=="custom"){
				// 	let customTimeArr=this.customTime.split(' - ')
				// 	let start=this.isDuringDate(start_time,customTimeArr[0],customTimeArr[1]);
				// 	let end=this.isDuringDate(end_time,customTimeArr[0],customTimeArr[1]);
				// 	if(!start||!end){
				// 		this.$tools.hideLoading()
				// 		this.$tools.showToast('当前日期不可用')
				// 		return;
				// 	}
				// }
				let orderData={
					store_id:uni.getStorageSync('store_id'),
					store_equipment_id:uni.getStorageSync('equipment_id'),
					store_name:this.tableInfo.shop_name,
					order_type:this.currmentIndex==0?'immediately':'make_appointment',
					order_price:this.order_price,
					reality_price:this.reality_price,
					yingfu_price:this.yingfu_price,
					pay_type:3,
					is_ci:this.allHour>23?1:0,
					meituan_code:this.qr_code,
					meituan_coupon_id:this.meituan_coupon_id,
					types:uni.getStorageSync('type'),
					hour_start_time:start_time,
					hours:this.totalHour,
					day_type:this.dateIndex
				}
				this.submitOrder(orderData);
			},
			submitOrder(orderData){
				this.$request.post(this.$api.verificationOrder,orderData, {
					token:true
				}).then(res => {
					let {
						data = {}
					} = res;
					if(res.code==1){
						this.order_id=data.order_id
						this.showTips()
					}else{
						uni.hideToast()
						uni.showModal({
							title: '提示',
							content: res.msg,
							success: function(res) {
								
							}
						});
					}
				}).finally(() => {
					setTimeout(()=>{
						this.$tools.hideLoading()
					}, 1000)
				})
			},
		}
	}
</script>

<style lang="scss">
	page{
		padding-bottom: 200upx;
	}
	.padd-box{
		padding: 0 36upx;
	}
	.billiards-info-box{
		align-items: flex-end;
		.billiards-img{
			width: 400upx;
			height: 400upx;
		}
		.info-right{
			margin-left: 20upx;
			.billiards-info{
				.billiards-name{
					font-size: 48upx;
					font-family: PingFang SC;
					font-weight: bold;
					line-height: 66upx;
					color: #333;
				}
				.shop-name{
					font-size: 24upx;
					font-family: PingFang SC;
					font-weight: 400;
					line-height: 34upx;
					color: #6E6E6E;
					margin-top: 10upx;
				}
				.status{
					width: 108upx;
					height: 44upx;
					line-height: 44upx;
					text-align: center;
					background: #50AB6E;
					border-radius: 22upx;
					font-size: 24upx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
					margin-top: 18upx;
				}
				.busy{
					background: #FFB726;
				}
				.order-time{
					font-size: 24upx;
					font-family: PingFang SC;
					font-weight: 400;
					line-height: 34upx;
					height: 34upx;
					color: #FFB726;
					margin-top: 24upx;
				}
			}
			.verification-box{
				width: 290upx;
				height: 60upx;
				margin:28upx auto;
			}
		}
	}
	.coupon-box{
		.coupon-cont{
			height: 100upx;
			background: url(../../static/coupon/couponBg.png) no-repeat center/100% 100%;
			padding: 0 40upx;
			font-size: 28upx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #000000;
			.coupon-left{
				font-size: 40upx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #000000;
				.coupon-name{
					width: 440upx;
					@include ellipsis(1);
				}
				.coupon-icon{
					width: 56upx;
					height: 56upx;
					margin-right: 22upx;
					flex: none;
				}
			}
			.coupon-right{
				flex: none;
			}
		}
		.time-tips{
			font-size: 24upx;
			font-family: PingFang SC;
			font-weight: 400;
			line-height: 40upx;
			color: #FFB726;
			text-align: center;
			margin-top: 14upx;
		}
	}
	.meal-box{
		margin-top: 30upx;
		flex-wrap: wrap;
		.meal-item{
			width: 320upx;
			height: 140upx;
			background: #FFFFFF;
			border-radius: 16upx;
			font-size: 36upx;
			font-family: PingFang SC;
			font-weight: 500;
			line-height: 50upx;
			color: #333;
			justify-content: center;
			margin-bottom: 28upx;
			position: relative;
			.meal-icon{
				width: 48upx;
				height: 48upx;
				margin-right: 20upx;
			}
			.price-text{
				font-size: 24upx;
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 34upx;
				color: #6E6E6E;
			}
			.meal-tips{
				font-size: 20upx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				width: 110upx;
				height: 36upx;
				line-height: 36upx;
				text-align: center;
				background:#FFB726;
				border-radius: 0px 16upx 0px 16upx;
				position: absolute;
				top: 0;
				right: 0;
				display: inline-block;
			}
		}
		.active{
			background: #FFB726;
		}
	}
	.time-box{
		margin-top: 30upx;
		.meal-info{
			font-size: 24upx;
			font-family: PingFang SC;
			font-weight: 400;
			line-height: 34upx;
			color: #6E6E6E;
			.meal-title{
				font-size: 36upx;
				font-family: PingFang SC;
				font-weight: 500;
				line-height: 50upx;
				color: #333;
				margin-bottom: 12upx;
			}
			.set-time{
				font-size: 24upx;
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 34upx;
				color: #FFB726;
				margin-left: 28upx;
			}
		}
		.operation-box{
			font-size: 36upx;
			font-family: PingFang SC;
			font-weight: 500;
			line-height: 50upx;
			color: #333;
			.reduce-btn{
				width: 80upx;
				height: 80upx;
				line-height: 80upx;
				text-align: center;
				background:#E2E2E2;
				border-radius: 16upx;
				font-size: 48upx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #969696;
			}
			.operation-num{
				margin: 0 30upx;
			}
			.increase-btn{
				width: 80upx;
				height: 80upx;
				line-height: 80upx;
				text-align: center;
				background:#FFB726;
				border-radius: 16upx;
				font-size: 48upx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333;
			}
		}
		.lattice-box{
			margin-top: 34upx;
			.lattice-item{
				margin-right: 6upx;
				.lattice{
					width: 24upx;
					height: 48upx;
					background:#E2E2E2;
					border-radius: 4upx;
				}
				.blue{
					background: #FFB726 !important;
				}
				.white{
					background:#FFFFFF;
				}
				.red{
					background:#FF4726!important;
				}
				.lattice-text{
					font-size: 20upx;
					font-family: PingFang SC;
					font-weight: 400;
					line-height: 28upx;
					color: #55525D;
				}
			}
		}
		.date-box{
			margin-top: 30upx;
			justify-content: center;
			.date-item{
				width: 124upx;
				height: 80upx;
				line-height: 80upx;
				text-align: center;
				background:#fff;
				border-radius: 16upx;
				font-size: 36upx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333;
				margin-right: 24upx;
				position: relative;
			}
			.data-active{
				background-color: #FFB726;
			}
		}
		.select-time{
			font-size: 32upx;
			font-family: PingFang SC;
			font-weight: 400;
			line-height: 44upx;
			color: #333;
			margin-top: 36upx;
		}
	}
	.explain-box{
		margin-top: 28upx;
		border-top: 2upx solid #E2E2E2;
		.point-box{
			margin-top: 20upx;
			align-items: flex-start;
			.point-icon{
				width: 32upx;
				height: 32upx;
				margin-right: 20upx;
				margin-top: 10upx;
			}
			.point-cont{
				.point-text{
					font-size: 24upx;
					font-family: PingFang SC;
					font-weight: 400;
					line-height: 40upx;
					color: #FFB726;
				}
			}
		}
		.explain-cont{
			margin-top: 36upx;
			font-size: 28upx;
			font-family: PingFang SC;
			font-weight: 400;
			line-height: 44upx;
			color: #969696;
			.explain-text{
				font-size: 28upx;
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 44upx;
				color: #969696;
			}
			rich-text{
				p{
					color: #969696;
				}
			}
		}
	}
	.btn-box{
		background-color: #FFFFFF;
		padding: 18upx 32upx;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		margin: auto;
		.determine-btn{
			width: 286upx;
			height: 80upx;
			text-align: center;
			background: #FFB726;
			border-radius: 16upx;
			font-size: 36upx;
			font-family: PingFang SC;
			font-weight: 500;
			line-height: 80upx;
			color: #333;
			margin: auto;
		}
	}
	.mask-box{
		background:rgba(0, 0, 0, .5);
		border-radius: 16upx;
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
	}
	.tips-box{
		width: 660upx;
		height: 502upx;
		background:#fff;
		border-radius: 16upx;
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
		z-index: 999;
		.tips-image{
			width: 80upx;
			height: 80upx;
			margin-top: 62upx;
			margin-bottom: 36upx;
		}
		.invalid{
			width: 144upx;
			height: 144upx;
			margin-top: 44upx;
			margin-bottom: 14upx;
		}
		.tips-name{
			font-size: 36upx;
			font-family: PingFang SC;
			font-weight: 500;
			line-height: 50upx;
			color: #333;
		}
		.tips-text{
			font-size: 32upx;
			font-family: PingFang SC;
			font-weight: 400;
			line-height: 44upx;
			color: #333;
			margin-top: 32upx;
		}
		.tips-btn{
			width: 286upx;
			height: 80upx;
			line-height: 80upx;
			text-align: center;
			border: 2upx solid #FFB726;
			border-radius: 16upx;
			font-size: 36upx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333;
			margin-top: 52upx;
		}
		.solid-btn{
			background-color: #FFB726;
		}
	}
</style>
